<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
    <style>
        .query-content div{
            float: left;
            margin-right: 20px;
        }
        .btn-margin{
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="page-container">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="query-content clearfloat">
                <div class="form-group">
                    <label class="control-label">
                        <label class="control-label">
                            <input type="number" class="form-control" id="u_id" placeholder="用户ID">
                        </label>
                    </label>
                </div>

                <div>

                    <label class="control-label">
                        <select id="mode_type" class="form-control" name="mode_type">
                            <option value="">默认全部</option>
                            <option value="1">模式一</option>
                            <option value="2">模式二</option>
                            <option value="3">模式三</option>
                            <option value="4">模式四</option>
                        </select>
                    </label>

                </div>

                <div>

                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="start_time" placeholder="">
                    </label>

                    <label class="control-label">
                        <label class="control-label">至</label>
                    </label>

                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="end_time" placeholder="">
                    </label>


                    <button type="button" class="btn btn-primary" id="sum">查询</button>
                </div>

            </div>


            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>气球消耗</th>
                    <th>气球获取</th>
                    <!--<th>至尊宝箱消耗</th>-->
                    <!--<th>至尊宝箱获取</th>-->
                    <th>总消耗</th>
                    <th>总获取</th>
                </tr>
                </thead>
                <tbody id="info">

                </tbody>
            </table>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.date-search').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click'
            });
        });
    });



    //计算房间流水
    $('#sum').click(function(){
        var start_time = $('#start_time').val();
        var end_time = $('#end_time').val();
        var u_id = $('#u_id').val();
        var mode_type = $('#mode_type').val();

        //将开始时间转为时间戳
        var date = new Date(start_time);
        var time1 = date.getTime();
        //获取当前时间戳
        var timestamp=new Date().getTime();

        if(time1 > timestamp ){
            layer.msg('时间超前啦',{
                icon:2,
                time:1000
            });
            $('#start_time').val(''); //清空
            return false;
        }

        if( start_time ==='' ||  end_time ===''){
            layer.msg('请选择完整的时间',{
                icon:2,
                time:1000
            });
            return false;
        }
        $.ajax({
            type: "get",
            url: "/DrawData",
            data:{
                'start_time':start_time,
                'end_time':end_time,
                'u_id':u_id,
                'mode_type':mode_type
            } ,
            dataType: 'JSON',
            success: function (re) {
                if (re.code === 100) {
                    var htmlElement = '',data = re.data;

                    htmlElement += "<tr><td>" + data.one_consume + "</td><td>" + data.one_profit + "</td>" +
//                        "<td>" + data.two_consume + "</td><td>" + data.two_profit + "</td>"+
                        "<td>" + data.total_consume + "</td><td>" + data.total_profit + "</td></tr>";

                    $('#info').html(htmlElement);
                } else {
                    layer.msg(re.msg,{
                        icon:2,
                        time:1000
                    });
                }
            },
            error: function () {
                alert('服务器出小差了');
            }
        });
    });

</script>
</body>
</html>